<template>
    <div class="make-offer">
      <div>
        <div class="header">
          <img :src="params.circleLogo" alt="">
        </div>
        <div class="body">
          <p class="title border-bottom">
            <span>{{params.circleName}}</span><span>拥有{{params.holdNum}}席</span>
          </p>
          <p class="cur-price">
            <span>当前价格</span>
            <span><em>￥{{params.buyPrice}}</em></span>
          </p>
          <p class="sell-price">
            <span>￥</span>
            <input type="text" v-model="makeOfferPrice" :placeholder="placeholder">
          </p>
          <p class="submit" @click="submit">
            <span>提交</span>
          </p>
        </div>
      </div>
      <share-wechat v-if="shareShow" @destroyF="shareShow = false"></share-wechat>
    </div>
</template>
<script>
import shareWechat from '../shareWechat.vue'
import { Toast } from 'mint-ui'
import third from '@/api/thirdPay.js'

export default {
    data () {
        return {
          makeOfferPrice: '',
          params: this.$route.query,
          shareShow: false
        }
    },
    components: {
      shareWechat
    },
    computed: {
      placeholder() {
        return `售价￥${Number(this.params.buyPrice * .85).toFixed(2)}~${Number(this.params.buyPrice).toFixed(2)}`
      }
    },
    methods: {
      submit() {
        if(!this.makeOfferPrice) {
          Toast({
            message: '请输入报价',
            duration: 1000
          })
          return
        }
        if(!/(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/.test(this.makeOfferPrice)) {
          Toast({
            message: '报价金额输入不正确',
            duration: 1000
          })
          return
        }
        if(this.params.buyPrice * .85 > this.makeOfferPrice * 1 || this.params.buyPrice * 1 < this.makeOfferPrice * 1) {
          Toast({
            message: `报价金额应在${this.params.buyPrice * .85}元到${this.params.buyPrice }元之间`,
            duration: 2000
          })
          return
        }
        if (this.params.status * 1 === 0) {
          this.$router.push({
            path: '/post',
            query: {
              agentId: this.params.agentId,
              price: this.makeOfferPrice,
              pid: this.params.pid,
              type: 1
            }
          })
        } else if (this.params.status * 1 === 1) {
          // this.shareShow = true
          this.$router.push({
            name: 'CircleDetail',
            query: {...this.params, offerPrice: this.makeOfferPrice, isOffer: true}
          })
          // this.params.circleUrl
          // var link = "http://dh.rz158.com/#/circleDetail?agentId=" + this.params.agentId + "&pid=" + this.params.pid + '&price=' + this.makeOfferPrice * 100
          // var url = 'http://dlsapi.rz158.com/thirdPay/getConfig?url=' + this.params.circleUrl; 
        }
      }
    }
}
</script>

<style lang="less" scoped>
  .make-offer {
    font-size: .28rem;
    overflow: hidden;
    height: 100%;
    background: #efefef;
    .header {
      background: #fff;
      text-align: center;
      img {
        width: 90%;
        border-radius: 10px;
        margin-top: 20px;
      }
    }
    .border-bottom {
      border-bottom: 1px solid #e8e8e8;
    }
    .body {
      padding: 0 5%;
      background: #fff;
      margin:  0 auto;
      .title, .cur-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.1rem;
        span:nth-child(1) {
          font-size: .28rem;
        }
        em {
          color: #FF2D41;
          font-style: normal;
        }
      }
      .title {
        span:nth-child(1) {
          font-size: .3rem;
          color: #0A0A0A;
          font-family: PingFang-SC-Bold;
        }
      }
      .sell-price {
        display: flex;
        align-items: center;
        span {
          font-size: .5rem;
          color: #282828;
          font-family: PingFang-SC-Medium;
        }
        input {
          width: 100%;
          position: relative;
          outline: none;
          border: none;
          height: .8rem;
          font-size: .3rem;
        }
      }
    }
    .submit {
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      background: #29abae;
      &:active {
        background: #1d7c7e;
      }
      span {
        color: #fff;
        height: .81rem;
        line-height: 40px;
        font-size: .35rem;
      }
    }
  }
</style>
